<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./10-reactive-01-实现基本的依赖收集.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script>

      const state = { name: "孙悟空", age: 18 };
      // 定义一个变量，触发者
      const proxy = reactive(state);

      // 定义一个函数，响应者
      function effectName() {
        console.log("effectName被执行了...");
        app.innerHTML = proxy.name;
      }
      effect(effectName);

      function effectAge() {
        console.log("effectAge被执行了...", proxy.age);
      }
      effect(effectAge);

      // 模拟数据的改变
      setTimeout(() => {
        proxy.name = "猪八戒";
      }, 1000);
      console.log("bucket", bucket);
    </script>
  </body>
</html>
